<template>
  <div class="E-popover-singer no-scroll-bar" :style="{width:introduction.length?'400px':'300px'}">
    <div class="wrap-head">
      <div class="image">
        <img v-lazy="`${singerData.img1v1Url}?param=100y100`" />
      </div>
      <div class="box-content">
        <p class="title">{{singerData.name}}</p>
        <p class="content">{{singerData.briefDesc}}</p>
      </div>
    </div>
    <div class="wrap-body">
      <p class="more" v-if="!more">
        <i v-if="!load" @click="getData_detail(id)" class="is-load el-icon-arrow-down" />
        <i v-else class="is-await el-icon-loading" />
      </p>
      <p class="no-data" v-if="more&&!introduction.length">暂无数据</p>
      <div v-if="introduction.length" class="wrap-introduction">
        <dl v-for="(item, index) in introduction" :key="index">
          <dt>{{item.ti}}</dt>
          <dd>{{item.txt}}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      load: false,
      more: false,
      singerData: {},
      introduction: []
    };
  },
  mounted() {
    this.getData(this.id);
  },
  methods: {
    getData(id) {
      this.$api.get('music_singer', { id }, true).then(({ artist }) => {
        this.singerData = artist;
      });
    },
    getData_detail(id) {
      this.load = true;
      this.$api.get('music_singer-describes', { id }, true).then(({ introduction }) => {
        this.more = true;
        this.introduction = introduction || [];
      }).finally(() => { this.load = false; });
    }
  }
};
</script>

<style lang="scss" scoped>
.E-popover-singer {
  @import "@/plug-in/_base.scss";
  overflow: hidden;
  overflow-y: scroll;
  max-height: 250px;
  transition: all 0.5s;
  cursor: default;
  & > .wrap-head {
    display: flex;
    padding-bottom: 5px;
    $size: 70px;
    & > .image {
      width: $size;
      height: $size;
      flex: 0 0 $size;
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    & > .box-content {
      flex-grow: 1;
      height: $size;
      padding-left: 10px;
      & > .title {
        font-weight: 600;
        font-size: 15px;
        line-height: 25px;
      }
      & > .content {
        font-size: 12px;
        line-height: 15px;
        text-indent: 1em;
        @include row-dot-show(3);
      }
    }
  }
  & > .wrap-body {
    border-top: 1px solid #eee;
    & > .more,
    & > .no-data {
      text-align: center;
    }
    & > .more {
      line-height: 20px;
      & > i {
        &.is-load {
          cursor: pointer;
        }
        &.is-await {
          cursor: no-drop;
        }
      }
    }
    & > .no-data {
      line-height: 35px;
      color: #ccc;
    }
    & > .wrap-introduction {
      dl {
        margin-top: 5px;
        & > dt {
          font-weight: 600;
          line-height: 20px;
        }
        & > dd {
          text-indent: 1em;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
